<style  scoped>
.el-header {
  padding: 0;
  height: auto !important;
}
.bg-purple-dark {
  width: 100%;
  height: 200px;
  background: #99a9bf;
}
.el-header .el-menu.el-menu--horizontal {
  border: none;
}
.el-header .border {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.el-menu-item{
  height:40px !important;
  line-height: 40px !important;
}
.minwidth{
  min-width: 960px;
}
/* .el-header >; */
</style>
<template>
  <el-header>
    <el-row >
      <el-col :span="24" >
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <!-- /* 菜单 */ -->
    <el-row class="border minwidth"  type="flex" justify="center">
      <el-col :span="12" class="minwidth">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :router="true"
        >
          <el-menu-item index="/desk/type/home">首页</el-menu-item>
          <template v-for="(item) in $store.state.base.typeList" >
            <el-menu-item  :key="item._id" v-if="item.publish" :index="'/desk/type/'+item.name">{{item.name}}</el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
// import { createNamespacedHelpers } from 'vuex';
// var { mapState }  = createNamespacedHelpers('base');
export default {
  data() {
    return {
      activeIndex: "/desk/home",
    };
  },
  computed:{
    // ...mapState('typeList'),
  },
  methods: {
    // //   点击导航
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },
  },
};
</script>